<template>
    <div>
        
        <el-card>
            <div>
                <el-form>
                    <el-form-item label="搜索">
                        <el-input class="input" placeholder="输入比赛名称" v-model="key" clearable @clear="getCompetitionList()"></el-input>
                        <el-button type="primary" class="btn" icon="el-icon-search" @click="searchCompetition">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                    :data="competitionList"
                    border
                    style="width: 100%"
                >
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        prop="createdAt"
                        label="发布时间"
                        sortable
                        width="width">
                    </el-table-column>
                    <el-table-column
                        prop="competition_name"
                        label="比赛名称"
                        width="width">
                    </el-table-column>
                    <el-table-column
                        prop="competition_type"
                        label="比赛类型"
                        width="width">
                    </el-table-column>
                     <el-table-column
                        prop="tag"
                        label="比赛进程"
                        width="100"
                        :filters="[
                            { text: '即将报名', value:0}, { text: '报名中', value:1 },
                            { text: '比赛中', value:2}, { text: '比赛截止', value:3},{text: '即将开赛', value:3}]"
                        filter-placement="bottom-end">
                        <template slot-scope="scope">
                            <el-tag type="success" v-show="scope.row.tag==0">即将报名</el-tag>
                            <el-tag type="" v-show="scope.row.tag==1">报名中</el-tag>
                            <el-tag type="warning" v-show="scope.row.tag==2">比赛中</el-tag>
                            <el-tag type="danger" v-show="scope.row.tag==3">比赛结束</el-tag>
                            <el-tag type="info" v-show="scope.row.tag==4">即将开赛</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="User.username"
                        label="发布者账号"
                        width="width">
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        label="当前状态"
                        width="width">
                        <template slot-scope="scope">
                            {{scope.row.status==0?'正常':'已删除'}}
                        </template> 
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        width="width">
                        <template slot-scope="scope">
                            <el-button type="text" @click="modifyCompetition(scope,1)" v-show="scope.row.status==0">修改</el-button>
                            <i class="el-icon-check delete" v-show="scope.row.status==-1">已删除</i>
                            <el-button type="text" class="delete" v-show="scope.row.status==0" @click="isDelete(scope,1)">删除</el-button>
                            <el-button type="text" v-show="scope.row.status==-1" @click="isDelete(scope,0)">撤回</el-button>
                        </template> 
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @prev-click="gotoPrePage"
                    @next-click="gotoNextPage"
                    :total="allpages">
                </el-pagination>
            </div>
        </el-card>
       
    </div>
</template>

<script>
import {getCompetitionList,searchCompetition,deleteCompetition} from '@/api/competition'
export default {
    name:'competition',
    data() {
        return {
            competitionList:[],//竞赛列表
            page:1,//当前页数
            allpages:1,//总共的页数
            key:'',//搜索关键词
            status:0,//记录当前网页状态，0表示展示状态，1表示搜索状态
        }
    },
    mounted(){
        this.getCompetitionList()
    },
    watch:{
        //当搜索框内容为空时触发
        key(newValue){
            if(newValue==''){
                this.status = 0
                this.getCompetitionList()
            }
        }
    },
    methods:{
        //搜索竞赛
        searchCompetition(){
            this.status = 1
            //初始化当前的页面
            this.page = 1
            if(this.key==''){
                this.$message({
                   type:'warning',
                   showClose:true,
                   duration:1000,
                   message:'搜索内容不能为空'
                })
                return
            }
            searchCompetition({
                key:this.key,
                page:this.page
            }).then(res=>{
                this.competitionList = res.data.info
                this.competitionList.forEach(item=>{
                    item.createdAt = this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm')
                    //对当前比赛状态进行处理
                    let now = this.$moment()
                    let applyStartDay = now.diff(item.regist_start_time,'minute')/60/24
                    let applyEndDay = now.diff(item.regist_end_time,'minute')/60/24
                    let raceStartDay = now.diff(item.race_start_time,'minute')/60/24
                    let raceEndDay = now.diff(item.race_end_time,'minute')/60/24
                    if(applyStartDay<0){
                        this.$set(item,'tag',0)
                    }else if(applyStartDay>0&&applyEndDay<0){
                        this.$set(item,'tag',1)
                    }else if(raceStartDay>0&&raceEndDay<0){
                        this.$set(item,'tag',2)
                    }else if(raceEndDay>0){
                        this.$set(item,'tag',3)
                    }else if(applyEndDay>0&&raceStartDay<0){
                        this.$set(item,'tag',4)
                    }
                })
                this.allpages = Math.ceil(res.data.number/10)
                console.log(this.allpages)
            })
        },
        //获取竞赛列表
        getCompetitionList(){
            //获取竞赛列表
            getCompetitionList({
                page:this.page,
            }).then(res=>{
                this.competitionList = res.data.info
                this.competitionList.forEach(item=>{
                    item.createdAt = this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm')
                    //对当前比赛状态进行处理
                    let now = this.$moment()
                    let applyStartDay = now.diff(item.regist_start_time,'minute')/60/24
                    let applyEndDay = now.diff(item.regist_end_time,'minute')/60/24
                    let raceStartDay = now.diff(item.race_start_time,'minute')/60/24
                    let raceEndDay = now.diff(item.race_end_time,'minute')/60/24
                    if(applyStartDay<0){
                        this.$set(item,'tag',0)
                    }else if(applyStartDay>0&&applyEndDay<0){
                        this.$set(item,'tag',1)
                    }else if(raceStartDay>0&&raceEndDay<0){
                        this.$set(item,'tag',2)
                    }else if(raceEndDay>0){
                        this.$set(item,'tag',3)
                    }else if(applyEndDay>0&&raceStartDay<0){
                        this.$set(item,'tag',4)
                    }
                })
                this.allpages = Math.ceil(res.data.number/10)
            })
        },
        // 用户点击下一页
        gotoNextPage(){
            this.page = this.page+1
            if(this.status==0){
                this.getCompetitionList()
            }else{
                this.searchCompetition()
            }
        },
        // 用户点击上一页
        gotoPrePage(){
            this.page = this.page-1
            if(this.status==0){
                this.getCompetitionList()
            }else{
                this.searchCompetition()
            }
        },
        //是否删除
        isDelete(uid,isDelete){
            if(isDelete==1){
                this.$confirm('删除后不可恢复，是否删除？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.deleteCompetition(uid,isDelete)
                    }).catch(() => {
                        this.$message({
                        type:'warning',
                        showClose:true,
                        duration:1000,
                        message:'操作取消'
                        })
                })
            }else{
                this.$confirm('恢复后用户都可进行查看，确认恢复吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.deleteCompetition(uid,isDelete)
                    }).catch(() => {
                        this.$message({
                        type:'warning',
                        showClose:true,
                        duration:1000,
                        message:'操作取消'
                        })
                })
            }
                
        },
        //删除比赛
        deleteCompetition(uid,isDelete){
            deleteCompetition({
                competition_uid:uid.row.uid,
                isDelete,
            }).then(res=>{
                if(isDelete==1){
                    if(res.status==200){
                        this.$message({
                        type:'success',
                        showClose:true,
                        duration:1000,
                        message:'已删除'
                        })
                        this.competitionList[uid.$index].status = -1
                    }
                }else{
                    if(res.status==200){
                        this.$message({
                        type:'success',
                        showClose:true,
                        duration:1000,
                        message:'已恢复'
                        })
                        this.competitionList[uid.$index].status = 0
                    }
                }
                
            })
        },
        //修改比赛
        modifyCompetition(uid){
            this.$router.push({
                name:'modify',
                params:{
                    uid:uid.row.uid,
                    info:uid.row
                }
            })
        }
    }

}
</script>

<style lang="scss" scoped>
$themeColor:rgb(64, 158, 255);
$oneColor:rgb(0, 188, 212);//即将报名的状态
$twoColor:rgb(247, 184, 9);//比赛中的状态
//输入框
.input{
    width: 300px;
}
//按钮
.btn{
    margin-left: 15px;
}
//分页
.pagination{
    display: flex;
    margin-top: 20px;
    justify-content: center;
}
//删除按钮
.delete{
    margin-left: 10px;
}
</style>